<template>
  <a-modal
    :title="null"
    :width="450"
    :visible="visible"
    :confirmLoading="loading"
    @cancel=" () => {$emit('cancel')}"
    :footer="null"
  >
    <a-spin :spinning="loading">
      <a-table ref="table" size="default" rowKey="id" :columns="columns" :data-source="list" showPagination="auto" :pagination="false">
        <span slot="remark" slot-scope="text, record">
          按{{record.price}}元/条计
        </span>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import { mapGetters } from 'vuex'
// 表单字段
const columns = [
  {
    title: '产品名称',
    dataIndex: 'productName',
  },
  {
    title: '条数',
    dataIndex: 'num',
  },
  {
    title: '备注',
    dataIndex: 'remark',
    scopedSlots: { customRender: 'remark' },
  },
]


export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    data: {
      type: Array,
      default:()=>[]
    },
  },
  components:{
    STable,
  },
  data() {
    this.columns = columns;
    return {
      loading:false,
      parameter: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParam: {
      },
      init:true,
    }
  },
  created() {},
  methods: {},
  computed:{
    ...mapGetters({ userInfo: 'userInfo' }),
    list: function(){
      const { balance, productPrices } = this.userInfo
      let list = []
      list = productPrices.map(v=>{
        v.num = Math.floor((balance || 0) / (v.price || 1))
        return v
      })
      return list
    }
  },
  watch: {
    visible: function (n, o) {
      if (n) {
        if(!this.init){
          this.$refs.table.refresh()
        }
      }
    },
  },
}

</script>